<template>
  <div class="app-container">
    <!-- 条件查询   -->
    <el-form :inline="true" :model="query" size="mini" >
      <el-form-item label="用户名称:">
        <el-input v-model.trim="query.userName" placeholder="用户名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="fetchBarrageList">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button :disabled=" userRole !== 'SUPER_ADMIN' "
               size="small" type="warning"
               icon="el-icon-document-delete"
               @click="handleMultiDel"
               style="margin-bottom: 20px;">删除</el-button>

    <!--  列表数据  -->
    <el-table :data="barrageList" border style="width: 100%" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column align="center" label="序号" width="40" type="index"></el-table-column>
      <el-table-column align="center" prop="userName" label="用户名称" width="120"></el-table-column>
      <el-table-column align="center" prop="userAvatar" label="头像" width="120">
        <template slot-scope="scope">
          <el-image :src="scope.row.userAvatar" style="height: 40px;width: 40px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="messageContent" label="留言内容" width="800"></el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" width="200">
        <template slot-scope="scope">
          {{ getFormat(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column  align="center" label="操作" >
        <template slot-scope="scope">
          <el-button icon="el-icon-document-delete"
                     :disabled=" userRole !== 'SUPER_ADMIN' "
                     type="danger" size="mini"
                     @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 10px;">
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="query.pageNo"
                     :page-sizes="[10, 20, 50]"
                     :page-size="query.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="query.total">
      </el-pagination>
    </div>

  </div>
</template>


<script>
import { dateFormat } from '@/utils/date';
import { barrageList, delBarrage } from "@/api/system";
import { getUserRole } from "@/utils/userToken";

export default {
  data() {
    return {
      query: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userName: ''
      },
      checkedBarrageIds: [],
      barrageList: [],
      showDelButton: false,
      userRole: ''
    }
  },

  created() {
    this.fetchBarrageList();
    this.userRole = getUserRole();
    /*if (userRole === 'SUPER_ADMIN') {
      console.log('role=', userRole);
      this.showDelButton = true;
    }*/
  },

  methods: {
    // 批量删除
    handleMultiDel() {
      if (this.checkedBarrageIds.length === 0) {
        this.$notify.error({
          title: '错误',
          message: '请至少选择一条留言',
          duration: 1500
        });
        return;
      }

      this.$confirm('确认删除这些记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        const data = {
          ids: []
        }
        data.ids = this.checkedBarrageIds;
        delBarrage(data).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            });
            // 刷新列表
            this.fetchBarrageList();
            this.checkedBarrageIds = [];
          } else {
            this.$notify.error({
              title: '错误',
              message: response.message,
              duration: 1500
            });
            this.checkedBarrageIds = [];
          }
        })
      }).catch(() => {
        // 取消删除
        this.checkedBarrageIds = []
      });
    },

    // 删除
    handleDel(id) {
      this.$confirm('确认删除这些记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        const data = {
          ids: []
        }
        data.ids.push(id);
        delBarrage(data).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            });
            // 刷新列表
            this.fetchBarrageList();
            this.checkedBarrageIds = [];
          } else {
            this.$notify.error({
              title: '错误',
              message: response.message,
              duration: 1500
            });
            this.checkedBarrageIds = [];
          }
        })
      }).catch(() => {
        // 取消删除
        this.checkedBarrageIds = []
      });
    },

    // 查询留言列表
    fetchBarrageList() {
      barrageList(this.query).then(res => {
        if (res.code === 200) {
          this.barrageList = res.data.list;
          this.query.total = res.data.total;
        }
      })
    },

    // 重置
    reload() {
      this.query.userName = '';
      this.query.pageNo = 1;
      this.query.pageSize = 10;
      this.query.total = 0;
      this.fetchBarrageList();
    },

    // 选中待删除的留言
    handleSelectionChange(val) {
      this.checkedBarrageIds = [];
      let len = JSON.parse(JSON.stringify(val))
      if (len.length !== 0) {
        for (let i = 0; i < len.length; i++) {
          this.checkedBarrageIds.push(len[i].id)
        }
      } else {
        this.checkedBarrageIds = len
      }
      console.log("checkedBarrageIds ==", this.checkedBarrageIds)
    },

    // 格式化日期
    getFormat(date){
      if (date) {
        return dateFormat(date);
      }
      return ""
    },

    handleSizeChange(val) {
      this.query.pageSize = val;
      this.fetchBarrageList();
    },

    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.fetchBarrageList();
    },

  }
}
</script>
